<template>
  <div class="middle-content">
    <top-title @click="onClickTitle" />
    <div class="statistic-box">
      <statistic-card
        title="综合应用功能上线率"
        :statistic="{
          value: 100,
          suffix: '%',
          subValue: '1.06%',
          trend: 'up',
        }"
      />
      <statistic-card
        title="综合应用功能上线率"
        :statistic="{
          value: 100,
          suffix: '%',
          subValue: '1.06%',
          trend: 'up',
        }"
      />
      <statistic-card
        title="综合应用功能上线率"
        :statistic="{
          value: 100,
          suffix: '%',
          subValue: '1.06%',
          trend: 'up',
        }"
      />
      <statistic-card
        title="综合应用功能上线率"
        :statistic="{
          value: 100,
          suffix: '%',
          subValue: '1.06%',
          trend: 'up',
        }"
      />
    </div>
  </div>
</template>

<script>
import TopTitle from "@/components/TopTitle/index.vue";
import StatisticCard from "@/components/StatisticCard";
import { inject } from "vue";
export default {
  name: "Middle",
  components: { StatisticCard, TopTitle },
  setup() {
    const changeGlobalBackgroundImage = inject("changeGlobalBackgroundImage");
    const globalBackgroundImage = inject("globalBackgroundImage");
    return {
      changeGlobalBackgroundImage,
      globalBackgroundImage,
    };
  },
  methods: {
    onClickTitle() {
      if (this.globalBackgroundImage.includes("bg1")) {
        console.log("change");
        this.changeGlobalBackgroundImage(require("@/assets/bg2.jpg"));
      } else {
        this.changeGlobalBackgroundImage(require("@/assets/bg1.jpg"));
      }
    },
  },
};
</script>

<style scoped lang="scss">
.statistic-box {
  display: grid;
  grid-template-columns: repeat(4, 288px);
  grid-gap: 20px 20px;
  place-content: center;
  margin-top: 40px;
}
</style>
